/**
 * @description 订单列表
 */
import style from './styles/AppealList.less';
import classnames from "classnames";
import React from 'react';
import { Button } from 'wd-mobile';
import ScrollReachEndContainer from "components/ScrollReachEndContainer";

import { list } from "api_zhoujianyi/front/web/order";
//img
import icon_close from "./images/icon_close.png";

import util from "commons/util";
let query = util.parseQueryString();

// img
import img_nolist from "images/norecord.png";


class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            page: 1,
            // 数据
            data: [],
            type: "appeal",
            hasload: false,
            scrollLoadText: "正在查询订单...",
            dispute:true
        }

        // 是否正在加载数据
        this.loading = false;
    }
    componentDidMount() {
        this.appeal();
    }

    componentWillUnmount() {
    }


    render() {
        let { dispute} = this.state;
        return (
            <div className={style.container}>
                <div hidden={!dispute} className={style.disputeTips}>请及时处理纠纷，若有疑问请与客服联系 <span onClick={() => {
                    this.setState({
                        dispute: false
                    })
                }}><img src={icon_close} alt="" /></span></div>
                <ScrollReachEndContainer showScrollLoadText={this.state.showScrollLoadText} loadText={this.state.scrollLoadText} className={classnames(style.main, "x-scroll-y")} onReachEnd={() => {
                    this.reachEnd();
                }}>
                    {
                        this.state.data.map((order, index) => {
                            return (
                                <div className={style.orderInfo} key={index}>
                                    <div className={classnames(style.orderNo, "x-part")}>
                                        <span>订单号：{order.orderNo}</span>
                                    </div>
                                    <div className={classnames(style.orderInfoGoods, "x-part")}>
                                        <div className={style.orderInfoGoodsImg}>
                                            <div className={style.orderInfoGoodsImgContainer} style={order.goodsIcon ? { backgroundImage: `url(${order.goodsIcon})` } : null}></div>
                                        </div>
                                        <div className={style.orderInfoGoodsText}>
                                            <div className={style.orderInfoGoodsTitle}>
                                                <span>{order.goodsName}</span>
                                            </div>
                                            <div className={style.orderTime}>
                                                <span>下单时间：{order.createTime}</span>
                                            </div>
                                            <div className={style.quantity}>
                                                <span>数量：1</span>
                                            </div>
                                            <div className={style.totalPrice}>
                                                <span className={style.totalPriceTitle}>合计：</span>
                                                <span className={style.totalPriceValue}>￥{order.realPayAmount}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div className={classnames(style.orderInfoMore, "x-part")}>
                                        <div className={style.orderInfoMoreBtns}>
                                            <Button className={style.dealButton} onClick={(e) => {
                                                e.stopPropagation();
                                                location.href = `./order.html#/DealDisputes/${order.orderNo}`
                                            }}>纠纷处理</Button>
                                            <div className={style.time}>纠纷已发起：<span>{order.appealTime}</span></div>
                                            <div>纠纷原因：<span>{order.complaintReasons}</span></div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                    {
                        this.state.data.length <= 0 && !!this.state.hasload && <div className={style.nolist}>
                            <img src={img_nolist} alt="" />
                            <div>列表暂无信息</div>
                        </div>
                    }
                </ScrollReachEndContainer>
            </div>
        )
    }


    // dealDate(time){
    //     let nowTime=Date.now() -new Date(time).getTime();
    //     let minute=0,hour=0;
    //     hour=Math.floor(nowTime/(60*60*1000));
    //     minute=Math.floor(nowTime%(60*60*1000)/(60*1000));
    //     return `${hour}小时${minute}分钟`
    // }


    // 纠纷中
    appeal() {
        list({
            page: this.state.page,
            size: 10,
            status: 'WAIT_MERCHANT'
        }).then(res => {
            const newData = [...this.state.data, ...res.data.data];
            this.setState({
                data: newData,
                showScrollLoadText: newData.length > 0,
                scrollLoadText: res.data.data.length < 10 ? "没有更多订单" : "正在加载更多订单...",
                page: res.data.data.length < 1 ? this.state.page : this.state.page + 1,
                hasload: true
            })
            this.loading = false;
        })
    }




    // 触底
    reachEnd() {
        if (!this.loading) {
            this.loading = true;
            this.appeal();
        }
    }
}

export default App;